<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ol,ul{list-style:none}
        a{text-decoration:none}
        fieldset,img{border:0;vertical-align:top;}
        a,input,button,select,textarea{outline:none;}
        a,button{cursor:pointer;}
        body{
            height: 1600px;
        }
        .wrap{
            width:1200px;
            margin:100px auto;
        }
        .slide {
            height:500px;
            position: relative;
        }
        .slide li{
            position: absolute;
            left:200px;
            top:0;
        }
        .slide li img{
            width:100%;
        }
        .arrow{
            opacity: 0;
        }
        .prev,.next{
            width:76px;
            height:112px;
            position: absolute;
            top:50%;
            margin-top:-56px;
            background: url(./images/prev.png) no-repeat;
            z-index: 99;
        }
        .next{
            right:0;
            background-image: url(./images/next.png);
        }
    </style>
    <!-- <script src="./js/animate.js"></script>
    <script src="./js/index.js"></script> -->
    <script src="../d27/js/jquery.js"></script>
</head>

<body>
    <div class="wrap" id="wrap">
        <div class="slide" id="slide">
            <ul>
                <li><a href="#"><img src="images/slidepic1.jpg" alt="" /></a></li>
                <li><a href="#"><img src="images/slidepic2.jpg" alt="" /></a></li>
                <li><a href="#"><img src="images/slidepic3.jpg" alt="" /></a></li>
                <li><a href="#"><img src="images/slidepic4.jpg" alt="" /></a></li>
                <li><a href="#"><img src="images/slidepic5.jpg" alt="" /></a></li>
            </ul>
            <div class="arrow" id="arrow">
                <a href="javascript:;" class="prev"></a>
                <a href="javascript:;" class="next"></a>
            </div>
        </div>
    </div>
    <script>
        var jsonData = [
    {   //5
        width: 400,
        top: 20,
        left: 750,
        opacity: .20,
        zIndex: 2
    },
    {   //  1
        width: 400,
        top: 20,
        left: 50,
        opacity: 0.2,
        zIndex: 2
    },
    {  // 2
        width: 600,
        top: 70,
        left: 0,
        opacity: .80,
        zIndex: 3
    },
    {   // 3
        width: 800,
        top: 100,
        left: 200,
        opacity: 1,
        zIndex: 4
    },
    {  // 4
        width: 600,
        top: 70,
        left: 600,
        opacity: .80,
        zIndex: 3
    }
];
    $(function(){
        for(var i=0;i<$("li").length;i++){
            $(".slide").find("li").eq(i).css(jsonData[i])
        }
        $(".wrap").mouseenter(function(){
            $(this).children().children(".arrow").css("opacity",1)
        }).mouseleave(function(){
            $(this).children().children(".arrow").css("opacity",0)
        })
        $(".arrow>.prev").click(function(){
                jsonData.unshift(jsonData.pop());
                for(var j=0;j<$("li").length;j++){
                    $(".slide").find("li").eq(j).animate(jsonData[j])
                }
            })
            $(".arrow>.next").click(function(){
                jsonData.push(jsonData.shift());
                for(var j=0;j<$("li").length;j++){
                    $(".slide").find("li").eq(j).animate(jsonData[j])
                }
            })
    })
    </script>
</body>
</html>